<template>
  <div class="compression">
    <div class="wrapper">
      <div class="b-f">
        <div class="title">
          <div class="container-title">
            <div class="icon"></div>系统概况
          </div>
        </div>
        <div class="f-c">
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/1.png" alt="" class="f-l" />
            <div class="f-r">
              <div>用电功率（m³）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.electricityPower | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/2.png" alt="" class="f-l" />
            <div class="f-r">
              <div>发电功率（kW）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.generatedOutput | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/3.png" alt="" class="f-l" />
            <div class="f-r">
              <div>供热功率（kW）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.heatingPower | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/4.png" alt="" class="f-l" />
            <div class="f-r">
              <div>供冷功率（m³）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.coldPower | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/5.png" alt="" class="f-l" />
            <div class="f-r">
              <div>压缩空气液位(%)</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.compressedAirLevel | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/6.png" alt="" class="f-l" />
            <div class="f-r">
              <div>转换效率（kW）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.transferEfficiency | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/7.png" alt="" class="f-l" />
            <div class="f-r">
              <div>储热量（MWh）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.heatStorage | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="f-c-item">
            <img src="../../../../assets/img/yskq/8.png" alt="" class="f-l" />
            <div class="f-r">
              <div>储冷量（MWh）</div>
              <div style="font-weight:bold;font-size:16px">
                {{ this.yskq.coldStorage | noDataFormat }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="b-s">
        <div class="b-s-c">
          <div class="b-s-c-item">
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/9.png" alt="" />
                <div style="font-size:14px;margin-left:12px">日常电量</div>
              </div>
              <div style="font-size:14px;color:#98d877">
                {{ this.yskq.powerConsumptionDay | noDataFormat }}
              </div>
            </div>
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/9.png" alt="" />
                <div style="font-size:14px;margin-left:12px">累计用电量</div>
              </div>
              <div style="font-size:14px;color:#98d877">
                {{ this.yskq.powerConsumptionTotal | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="b-s-c-item">
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/10.png" alt="" />
                <div style="font-size:14px;margin-left:12px">日发电量</div>
              </div>
              <div style="font-size:14px;color:#fe9f10">
                {{ this.yskq.generatingCapacityDay | noDataFormat }}
              </div>
            </div>
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/10.png" alt="" />
                <div style="font-size:14px;margin-left:12px">累计发电量</div>
              </div>
              <div style="font-size:14px;color:#fe9f10">
                {{ this.yskq.generatingCapacityTotal | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="b-s-c-item">
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/11.png" alt="" />
                <div style="font-size:14px;margin-left:12px">日供热量</div>
              </div>
              <div style="font-size:14px;color:#fc7f7d">
                {{ this.yskq.heatingConsumptionDay | noDataFormat }}
              </div>
            </div>
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/11.png" alt="" />
                <div style="font-size:14px;margin-left:12px">累计供热量</div>
              </div>
              <div style="font-size:14px;color:#fc7f7d">
                {{ this.yskq.heatingConsumptionTotal | noDataFormat }}
              </div>
            </div>
          </div>
          <div class="b-s-c-item" style="border:none">
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/12.png" alt="" />
                <div style="font-size:14px;margin-left:12px">当前供冷量</div>
              </div>
              <div style="font-size:14px;color:#52a9f7">
                {{ this.yskq.coldConsumptionDay | noDataFormat }}
              </div>
            </div>
            <div class="b-s-c-item-t">
              <div style="display:flex">
                <img src="../../../../assets/img/yskq/12.png" alt="" />
                <div style="font-size:14px;margin-left:12px">累计供冷量</div>
              </div>
              <div style="font-size:14px;color:#52a9f7">
                {{ this.yskq.coldConsumptionTotal | noDataFormat }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="b-t">
        <div class="title">
          <div class="container-title">
            <div class="icon"></div>当日功率曲线
          </div>
        </div>
        <div class="chartd">
          <compressioncharts
            ref="chartd"
            :getPowerCurveDay="this.getPowerCurveDayList"
          ></compressioncharts>
        </div>
      </div>
      <div class="b-fo">
        <div class="title">
          <div class="container-title">
            <div class="icon"></div>压缩空气储能系统图
          </div>
        </div>
        <div class="b-fo-c">
          <div class="aa">
            <img
              src="../../../../assets/img/yskq/line/11.png"
              alt=""
              class="imga"
            />
            <div class="texta">环境大气</div>
            <img
              src="../../../../assets/img/yskq/logo/01.png"
              alt=""
              class="imgb"
            />
            <img
              src="../../../../assets/img/yskq/line/05.png"
              alt=""
              class="imgc"
            />
            <img
              src="../../../../assets/img/yskq/logo/02.png"
              alt=""
              style="width:54px"
              class="imgd"
            />
            <img
              src="../../../../assets/img/yskq/line/05.png"
              alt=""
              class="imge"
            />
            <img
              src="../../../../assets/img/yskq/logo/03.png"
              alt=""
              style="width:54px"
              class="imgf"
            />
            <img
              src="../../../../assets/img/yskq/line/05.png"
              alt=""
              class="imge"
              style="left:48.2%"
            />
            <img
              src="../../../../assets/img/yskq/logo/04.png"
              alt=""
              style="width:54px;left:61.3%"
              class="imgf"
            />
            <img
              src="../../../../assets/img/yskq/line/05.png"
              alt=""
              class="imge"
              style="left:65.5%"
            />
            <img
              src="../../../../assets/img/yskq/logo/13.png"
              alt=""
              style="width:54px;left:78.5%"
              class="imgf"
            />
            <img
              src="../../../../assets/img/yskq/line/07.png"
              alt=""
              class="imge"
              style="left:83%"
            />
            <img
              src="../../../../assets/img/yskq/logo/07.png"
              alt=""
              style="width:54px;"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/logo/05.png"
              alt=""
              style="width:54px;left:8%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/logo/14.png"
              alt=""
              style="width:54px;left:26.5%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/logo/06.png"
              alt=""
              style="width:54px;left:78.5%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/line/18.png"
              alt=""
              class="imgh"
            />
            <img
              src="../../../../assets/img/yskq/line/13.png"
              alt=""
              class="imgi"
            />
            <img
              src="../../../../assets/img/yskq/line/14.png"
              alt=""
              class="imgj"
            />
            <div class="texta" style="top: 67%;left: 1.5%;">园区制冷</div>
            <div class="texta" style="top: 91%;left: 1.5%;">办公室新风</div>
            <img
              src="../../../../assets/img/yskq/line/20.png"
              alt=""
              class="imgk"
            />
            <img
              src="../../../../assets/img/yskq/line/03.png"
              alt=""
              class="imgl"
            />
            <img
              src="../../../../assets/img/yskq/line/03.png"
              alt=""
              class="imgl"
              style="left:55%;"
            />
            <img
              src="../../../../assets/img/yskq/line/04.png"
              alt=""
              class="imgl"
              style="left:17%;width:14%;top:0%"
            />
            <img
              src="../../../../assets/img/yskq/line/04.png"
              alt=""
              class="imgl"
              style="left:52%;width:14%;top:0%"
            />
            <div style="font-size:14px" class="textc">空压机组</div>
            <div style="font-size:14px;left:56%;top:26%" class="textc">
              循环压缩机组
            </div>
            <div style="font-size:14px;left:21%;top:98%" class="textc">
              膨胀发电机组
            </div>
            <div class="zimu" style="background:#46a3f7">M</div>
            <div class="zimu" style="background:#46a3f7;left:53%">M</div>
            <img
              src="../../../../assets/img/yskq/line/16.png"
              alt=""
              class="imgl"
              style="left:2%;top:84%"
            />
            <img
              src="../../../../assets/img/yskq/line/15.png"
              alt=""
              class="imgc"
              style="left:32%;top:84%"
            />
            <img
              src="../../../../assets/img/yskq/logo/08.png"
              alt=""
              style="width:54px;left:26.5%;top:77%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/line/03.png"
              alt=""
              class="imgl"
              style="left:20%;top:88%"
            />
            <img
              src="../../../../assets/img/yskq/line/04.png"
              alt=""
              class="imgl"
              style="left:17%;width:14%;top:72%"
            />
            <div class="zimu" style="background:#9999ff;left:18%;top:86%">
              G
            </div>
            <img
              src="../../../../assets/img/yskq/logo/09.png"
              alt=""
              style="width:60px;height:60px;left:46%;top:78%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/line/15.png"
              alt=""
              class="imgl"
              style="left:51%;width:14%;top:84%"
            />
            <img
              src="../../../../assets/img/yskq/logo/10.png"
              alt=""
              style="width:60px;height:60px;left:66%;top:78%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/line/15.png"
              alt=""
              class="imgl"
              style="left:70%;width:8%;top:84%"
            />
            <img
              src="../../../../assets/img/yskq/logo/11.png"
              alt=""
              style="width:60px;height:60px;left:78.5%;top:78%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/line/15.png"
              alt=""
              class="imgl"
              style="left:83%;width:13%;top:84%"
            />
            <img
              src="../../../../assets/img/yskq/logo/12.png"
              alt=""
              style="width:60px;height:60px;right:-1%;top:78%"
              class="imgg"
            />
            <img
              src="../../../../assets/img/yskq/line/08.png"
              alt=""
              class="imgl"
              style="left:98.4%;top:50%"
            />
            <img
              src="../../../../assets/img/yskq/line/10.png"
              alt=""
              class="imgl"
              style="left:80.4%;top:50%"
            />
            <img
              src="../../../../assets/img/yskq/line/09.png"
              alt=""
              class="imgl"
              style="left:80%;top:17.5%"
            />
            <div class="text-box">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>压力:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.pressure | noDataFormat }}kPa
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>温度:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.temperature | noDataFormat }}℃
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>用电负荷:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.electricalLoad | noDataFormat }}kW
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>能源转换效率:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.conversionEfficiency | noDataFormat }}%
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>单位能耗:</div>
                <div style="color:#46a3f7;">
                  {{ typeB.unitEnergyConsumption | noDataFormat }}kWh
                </div>
              </div>
            </div>
            <div class="text-box" style="left:67%;width:138px">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>压力:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.pressure | noDataFormat }}kPa
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>温度:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.temperature | noDataFormat }}℃
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>用电负荷:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.electricalLoad | noDataFormat }}kW
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>能源转换效率:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.conversionEfficiency | noDataFormat }}%
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>单位能耗:</div>
                <div style="color:#46a3f7;">
                  {{ typeC.unitEnergyConsumption | noDataFormat }}kWh
                </div>
              </div>
            </div>
            <div class="text-box" style="left:84%;width:1.7rem">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>压力:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.pressure | noDataFormat }}kPa
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>温度:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.temperature | noDataFormat }}℃
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>储槽液位:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.reservoirLevel | noDataFormat }}m
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>剩余压缩液容:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.surplusCompress | noDataFormat }}m³
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>可新增压缩液容量:</div>
                <div style="color:#9f9ffe;">
                  {{ typeD.addCompress | noDataFormat }}m³
                </div>
              </div>
            </div>
            <div class="text-box" style="left:32%;top:53%;width:1.6rem">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#9f9ffe;">
                  {{ typeE.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#9f9ffe;">
                  {{ typeE.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>温度:</div>
                <div style="color:#9f9ffe;">
                  {{ typeE.temperature | noDataFormat }}℃
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>发电功率:</div>
                <div style="color:#9f9ffe;">
                  {{ typeE.generatedOutput | noDataFormat }}kW
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>能源转换效率:</div>
                <div style="color:#9f9ffe;">
                  {{ typeE.conversionEfficiency | noDataFormat }}%
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>单位发电量:</div>
                <div style="color:#9f9ffe;">
                  {{ typeE.unitGeneratingCapacity | noDataFormat }}kWh
                </div>
              </div>
            </div>
            <div class="text-box" style="left:53%;top:58%;width:145px">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#ff9900;">
                  {{ typeF.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#ff9900;">
                  {{ typeF.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>压力:</div>
                <div style="color:#ff9900;">
                  {{ typeF.pressure | noDataFormat }}kPa
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>转换效率:</div>
                <div style="color:#ff9900;">
                  {{ typeF.conversionEfficiency | noDataFormat }}%
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>单位能耗:</div>
                <div style="color:#ff9900;">
                  {{ typeF.unitEnergyConsumption | noDataFormat }}kWh
                </div>
              </div>
            </div>
            <div class="text-box" style="left:70%;top:60%;width:1.2rem;">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#8e8efb;">
                  {{ typeA.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#8e8efb;">
                  {{ typeA.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>压力:</div>
                <div style="color:#8e8efb;">
                  {{ typeA.pressure | noDataFormat }}kPa
                </div>
              </div>
            </div>
            <div class="text-box" style="left:85%;top:60%;width:1.2rem;">
              <div style="display:flex;justify-content: space-between;">
                <div>进口流量:</div>
                <div style="color:#46a3f7;">
                  {{ typeG.inletFlowRate | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>出口流量:</div>
                <div style="color:#46a3f7;">
                  {{ typeG.outletFlow | noDataFormat }}t/s
                </div>
              </div>
              <div style="display:flex;justify-content: space-between;">
                <div>压力:</div>
                <div style="color:#46a3f7;">
                  {{ typeG.pressure | noDataFormat }}kPa
                </div>
              </div>
            </div>
          </div>
          <div class="bb">
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/13.png"
                alt=""
                style="margin-right:14px"
              />
              <div>分子筛</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/21.png"
                alt=""
                style="margin-right:14px"
              />
              <div>蒸发器</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/14.png"
                alt=""
                style="margin-right:14px"
              />
              <div>液化装置</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/22.png"
                alt=""
                style="margin-right:14px"
              />
              <div>气水换热器</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/15.png"
                alt=""
                style="margin-right:14px"
              />
              <div>储热装置</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/23.png"
                alt=""
                style="margin-right:14px"
              />
              <div>水泵</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/16.png"
                alt=""
                style="margin-right:14px"
              />
              <div>蓄冷装置</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/17.png"
                alt=""
                style="margin-right:14px"
              />
              <div>空气过滤器</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/18.png"
                alt=""
                style="margin-right:14px"
              />
              <div>溴化冷热双供机组</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/19.png"
                alt=""
                style="margin-right:14px"
              />
              <div>储液装置</div>
            </div>
            <div class="cc">
              <img
                src="../../../../assets/img/yskq/20.png"
                alt=""
                style="margin-right:14px"
              />
              <div>低温泵</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import compressioncharts from "../../../../components/echarts/compressioncharts.vue";
import {
  getSystemOverview,
  getPowerCurveDay,
  getEnergyStorageParameters
} from "../../../../api/scada.js";
export default {
  components: {
    compressioncharts
  },
  data() {
    return {
      yskq: {},
      getPowerCurveDayList: [],
      typeA: {},
      typeB: {},
      typeC: {},
      typeD: {},
      typeE: {},
      typeF: {},
      typeG: {}
    };
  },
  methods: {},
  mounted() {
    // console.log(1)
    getSystemOverview().then((res) => {
      this.yskq = res.result;
      // console.log(this.yskq)
    });
    getEnergyStorageParameters().then((res) => {
      // console.log(res.result,'123')
      this.typeA = res.result[0]|| {};
      this.typeB = res.result[1]|| {};
      this.typeC = res.result[2]|| {};
      this.typeD = res.result[3]|| {};
      this.typeE = res.result[4]|| {};
      this.typeF = res.result[5]|| {};
      this.typeG = res.result[6]|| {};
      console.log(this.typeG);
    });
    getPowerCurveDay().then((res) => {
      this.getPowerCurveDayList = res.result;
      // console.log(res)
        this.$refs.chartd.aaa();
    });
  }
};
</script>

<style scoped lang="scss">
  .container-title {
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .icon {
      margin-right: 10px;
      width: 4px;
      height: 16px;
      background-color: #0893fd;
    }
  }
.compression {
  width: 100%;
  height: 100%;
  overflow: auto;
  .text-box {
    padding: 0.06rem 0.06rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #f7f7f7;
    position: absolute;
    width: 142px;
    left: 32.5%;
    box-sizing: border-box;
  }
  .zimu {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    position: absolute;
    left: 18%;
    top: 11%;
    color: #ffffff;
  }
  .textc {
    position: absolute;
    top: 26%;
    left: 22%;
  }
  .imgl {
    position: absolute;
    top: 13%;
    left: 20%;
  }
  .imgk {
    position: absolute;
    top: 50%;
    left: 3%;
  }
  .imgj {
    position: absolute;
    top: 41%;
    left: 2%;
  }
  .imgi {
    position: absolute;
    top: 41%;
    left: 13%;
  }
  .imgh {
    position: absolute;
    top: 18%;
    left: 28%;
  }
  .imgg {
    position: absolute;
    top: 35%;
    right: -0.6%;
  }
  .imgf {
    position: absolute;
    top: 3%;
    left: 44%;
  }
  .imge {
    position: absolute;
    top: 9%;
    left: 31%;
  }
  .imgd {
    position: absolute;
    top: 3%;
    left: 26.5%;
  }
  .imgc {
    position: absolute;
    top: 9%;
    left: 13%;
  }
  .imgb {
    position: absolute;
    top: 3%;
    left: 8.4%;
    width: 54px;
  }
  .texta {
    width: 80px;
    height: 32px;
    background: #f7f7f7;
    font-size: 14px;
    color: #46a3f7;
    position: absolute;
    top: 12%;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imga {
    position: absolute;
    top: 9%;
    left: 2%;
  }
  .cc {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .aa {
    flex: 1;
    position: relative;
  }
  .bb {
    flex: none;
    margin-left: 80px;
  }
  .b-fo-c {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .b-fo {
    width: 100%;
    margin-top: 20px;
  }
  .b-t {
    margin-top: 20px;
  }
  .chartd {
    width: 100%;
    height: 270px;
  }
  .b-s-c-item-t {
    display: flex;
    justify-content: space-between;
    width: 57%;
  }
  .b-s-c-item {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    width: 25%;
    background: #f7f7f7;
    border-right: 1px dashed gray;
    height: 88px;
  }
  .b-s-c {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid gray;
  }
  .b-s {
    width: 100%;
    margin-top: 20px;
  }
  .f-r {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 60px;
    font-size: 14px;
  }
  .f-l {
    height: 60px;
    width: 60px;
    margin-right: 6px;
  }
  .f-c-item {
    display: flex;
    align-items: center;
  }
  .f-c {
    display: flex;
    justify-content: space-between;
    padding:10px;
  }
  .line {
    background: #0893fd;
    width: 4px;
    height: 16px;
    margin-right: 20px;
  }
  .b-f {
    width: 100%;
  }
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .wrapper {
    background-color: #ffffff;
    padding: 20px;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  background: #f1f3f6;
}
* {
  margin: 0;
  padding: 0;
}
</style>
